Next.js 入門者のメモ
Next.js の基本のキを体得しようと思って https://nextjs.org/learn を上から下までやった。いちおう書かれてことは理解できているとは思うけど、不注意もあってちょいちょいクイズで不正解を出していてウケる…。
https://gyazo.com/c48dc4f27dbc1791f02d6ffb2595dece
About Next.js
Next.js is a React framework that gives you building blocks to create web applications.
From JavaScript to React
JavaScript はそれなりに書いたことがあるので、ここはスッと
DOM のことも知っているよ
命令的プログラミング と 宣言的プログラミング
JSX
React コアコンセプト
Components
Props
State
useState なるほどね
例 const [likes, setLikes] = React.useState(0);
From React to Next.js
素の HTML の出番が減って、まるごと JavaScript になっていく感じね
How Next.js Works
Development と Production のモードがあるよ
Next.js には Rust で書かれたコンパイラがあるよ
SWC https://swc.rs/ ってやつを使っている
3 種のレンダリング牛丼
Server-Side Rendering
Static Site Generation
Client-Side Rendering.
ちらっと useSWR の話があった
https://swr.vercel.app/
Hydration についての説明あり
日本語だと「水和」になる？
日本語で理解しようとしてもむつかしいから Hydration で覚えた方がよさそう
Create a Next.js App
サンプルプロジェクトを落としてきてピッとサーバが立ち上がるの気分いい
ファイルを編集したらすぐに表示に反映されて気分いい
Navigate Between Pages
pages ディレクトリなるほどね
Link コンポーネントなるほどね
ウェブブラウザの DevTools を触らせて「ほらね？」とわからせるのいい
Assets, Metadata, and CSS
public ディレクトリは Rails といっしょと思っておけばいいかな
Image コンポーネントなるほどね
Head コンポーネントなるほどね
Script コンポーネントなるほどね
Layout コンポーネントなるほどね
これは提供されているものというよりは、プラクティスとして紹介されている？
className={styles.container}
HTML 要素へのクラス付けはこういうふうにやるのね
pages/_app.js っていう特別扱いのファイル
アプリケーション全体に適用したいグローバルな CSS はここで読み込ませる
そうすることで管理しやすくする
こいつを変更したらサーバを再起動しないと反映されない
clsx っちゅうライブラリがあるのね
Pre-rendering and Data Fetching
Pre-rendering なるほど
ウェブブラウザの設定で JavaScript を無効化してアクセスすると、なにが起きるかわかっておもしろい
2 種の Pre-rendering 牛丼
Static Generation
Server-side Rendering
Pre-rendering をどうするかはページごとに設定できる、便利
このへんが、従来の「ウェブアプリケーション開発フレームワーク」との大きな違いという印象
getStaticProps なるほど
この形で抽象化しているのね
どこからデータを取ってくるのか、ファイルシステムでもデータベースでも外部ソースでもよい
getServerSideProps なるほど
Server-side Rendering したいとき用
Client-side Rendering するなら SWR を使ってくれ、とのこと
Dynamic Routes
ここまでの内容は pages ディレクトリにファイルを置く Static Routes だったってこと
pages/posts/[id].js というファイルを置いて、中にロジックを書く
Rails でいうと Router / Controller / View あたりに分かれている処理
API Routes
pages/api 以下にファイルをつくる
Deploying Your Next.js App
Vercel のご紹介